<template>
  <div>
    <div
      class="left"
      :class="{ 'left-hide': leftHide }"
      ref="leftRef"
    >
      <div class="left-content" v-show="!detailVisible">
        <div class="left-content-tag-t" />
        <div class="left-content-tag-b" />
        <!-- <div class="left-content-title">项目列表</div> -->
        <div class="investPro-title">
          <div
            @click="toolItemClickHandle(item)"
            v-for="(item, index) in toolData"
            :key="index"
            :class="{
              'is-active': activeTool === item.value
            }"
          >
            {{ item.label }}
            <p class="line"></p>
          </div>
        </div>
        <div class="left-content-search">
          <el-checkbox
            v-model="checkboxState"
            size="mini"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
          />
          <Search
            v-model="keyword"
            placeholder="请输入关键词"
          />
        </div>
        <el-scrollbar class="left-content-tree">
          <div
            class="filter-panel"
            v-show="filterPanelVisible && !leftHide"
          >
            <div class="left-content-query-item">
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectCycle"
                placeholder="年度"
                clearable
              >
                <el-option
                  v-for="item in projectCycleOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="left-content-query-item">
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectStage"
                placeholder="阶段"
                clearable
              >
                <el-option
                  v-for="item in projectStageOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="left-content-query-item">
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectStatus"
                placeholder="状态"
                clearable
              >
                <el-option
                  v-for="item in projectStatusOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <!-- <div class="left-content-query-item">
              <el-select
                :popper-append-to-body="false"
                class="time"
                v-model="projectType"
                placeholder="类型"
                clearable
              >
                <el-option
                  v-for="item in projectTypeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div> -->
            <!-- popper-class="popper-main" -->
            <div>
              <el-popover
                placement="bottom-end"
                width="380"
                v-model="conditionScreenVisible"
                popper-class="popper-main"
              >
                <!-- style="background: rgba(0, 0, 0, 0.5);" -->
                <el-form
                  ref=""
                  :model="formSelect"
                  label-width="100px"
                >
                  <div class="popper-title">条件筛选</div>
                  <el-form-item
                    label="计划年度："
                    class="left-content-query-item"
                  >
                    <el-select
                      :popper-append-to-body="false"
                      style="width: 100%"
                      class="screen"
                      v-model="projectCycle"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in projectCycleOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="项目阶段："
                    class="left-content-query-item"
                  >
                    <el-select
                      :popper-append-to-body="false"
                      style="width: 100%"
                      class="screen"
                      v-model="projectStage"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in projectStageOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="项目状态："
                    class="left-content-query-item"
                  >
                    <el-select
                      :popper-append-to-body="false"
                      style="width: 100%"
                      class="screen"
                      v-model="projectStatus"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in projectStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="项目类型："
                    class="left-content-query-item"
                  >
                    <el-select
                      :popper-append-to-body="false"
                      style="width: 100%"
                      class="screen"
                      v-model="projectType"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in projectTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="项目片区："
                    class="left-content-query-item"
                  >
                    <el-select
                      :popper-append-to-body="false"
                      style="width: 100%"
                      class="screen"
                      v-model="projectArea"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in projectAreaOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item
                    label="项目进度："
                    class="left-content-query-item"
                  >
                    <el-select
                      :popper-append-to-body="false"
                      style="width: 100%"
                      class="screen"
                      v-model="projectProgress"
                      placeholder="请选择"
                      clearable
                    >
                      <el-option
                        v-for="item in projectProgressOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item>
                    <div style="margin: 20px 0 0 -40px">
                      <el-button
                        class="confirm-btn"
                        type="primary"
                        @click="
                          conditionScreenVisible = false
                        "
                        >确定
                      </el-button>
                      <el-button
                        class="cancel-btn"
                        @click="
                          conditionScreenVisible = false
                        "
                        >取消
                      </el-button>
                    </div>
                  </el-form-item>
                </el-form>
                <el-button
                  slot="reference"
                  class="more-btn"
                  style="height: 30px"
                  ><span
                    ><p
                      style="
                        margin-top: -4px;
                        color: #d2e6f0;
                      "
                    >
                      更多
                    </p></span
                  ></el-button
                >
              </el-popover>
            </div>
          </div>
          <div v-show="activeTool === 'government'">
            <div class="project-list">
              <div
                class="project-list-item"
                v-for="data in shownProjectListData"
                :key="data.pkid"
                @click="handleProjectItemClick(data)"
              >
                <div class="project-list-item-top">
                  <el-checkbox
                    v-model="data.checked"
                    @click.native="
                      (e) => e.stopPropagation()
                    "
                    @change="
                      (checked) =>
                        handleChange(checked, data)
                    "
                  />
                  <div class="project-list-item-top__title">
                    <span class="name">{{
                      data.项目名称
                    }}</span>
                    <span
                      style="
                        color: #0098ff;
                        margin-right: 6px;
                        font-weight: 600;
                        font-size: 14px;
                      "
                      >{{ data.建设周期 || '' }}</span
                    >
                    <span
                      class="status"
                      :class="{
                        zj: data.项目阶段 === '前期',
                        jc: data.项目阶段 === '新建',
                        dj: data.项目阶段 === '续建'
                      }"
                      >{{ data.项目阶段 }}</span
                    >
                  </div>
                </div>
                <div class="project-list-item-bottom">
                  <span
                    >{{ data.totalPrice || '--' }}万元</span
                  >
                  <span>{{ data.项目进度 || '--' }}</span>
                  <span
                    >年度目标：{{
                      data.年度目标 || '--'
                    }}</span
                  >
                </div>
              </div>
            </div>
          </div>
          <div v-show="activeTool === 'enterprise'">
            <div class="project-list">
              <div
                class="project-list-item"
                v-for="data in shownProjectListData"
                :key="data.pkid"
                @click="handleProjectItemClick(data)"
              >
                <div class="project-list-item-top">
                  <el-checkbox
                    v-model="data.checked"
                    @click.native="
                      (e) => e.stopPropagation()
                    "
                    @change="
                      (checked) =>
                        handleChange(checked, data)
                    "
                  />
                  <div class="project-list-item-top__title">
                    <span class="name">{{
                      data.项目名称
                    }}</span>
                    <span class="year">{{
                      data.建设周期 || ''
                    }}</span>
                    <span class="type">企业类型</span>
                  </div>
                </div>
                <div class="project-list-item-bottom">
                  <span
                    >{{ data.totalPrice || '--' }}万元</span
                  >
                  <span>{{ data.项目阶段 }}续</span>
                  <span
                    >年度目标：{{
                      data.年度目标 || '--'
                    }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>

      <div class="detail" v-if="detailVisible">
        <div class="detail-title" @click="backList">
          <el-button
            class="back"
            icon="el-icon-arrow-left"
            round
          />
          <span>{{
            detailData ? detailData.项目名称 : ''
          }}</span>
        </div>
        <Detail
          :detail-data="shownDetailData"
          :type="activeTool"
          :config-id="configId"
          :config-key="configKey"
        />
      </div>

      <div
        class="left-close"
        @click="leftHide = !leftHide"
      ></div>
      <div
        class="bar"
        @mousedown.prevent="handleLeftMouseDown"
      ></div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Search from '@/components/search'
import Detail from './components/detail'
import { getAction } from '@/utils/helper'
import { getProjectStatistics } from '@/api/project'
import { retrieveDataServiceById } from '@/api/multiple-dataservice'
import { treeBySpecialType } from '@/api/tree'

import New from '@/utils/new'

const mapViewer = {}
// const geojsonList = new Map()
// const labelEntities = new Map()
// const labelLayer = new Cesium.CustomDataSource('labelLayer')
let _layerManager

export default {
  name: 'Project',
  components: {
    Search,
    Detail
  },
  inject: ['viewerId'],
  data() {
    return {
      leftX: '',
      leftWidth: '',
      rightX: '',
      rightWidth: '',
      // 关键词 前端过滤树形结构
      keyword: '',
      pageSize: 100,
      pageIndex: 1,
      filterKeyword: '',
      projectListData: [],
      shownProjectListData: [],
      filterPanelVisible: true,
      rightFilterPanelVisible: false,
      // 项目类型
      projectType: '',
      // 项目周期
      projectCycle: '',
      // 项目状态
      projectStatus: '',
      // 阶段
      projectStage: '',
      projectArea: '',
      projectProgress: '',
      projectTypeOptions: [],
      projectCycleOptions: [],
      projectStatusOptions: [],
      projectStageOptions: [],
      projectAreaOptions: [],
      projectProgressOptions: [],
      // 统计数据
      statisticsData: [],
      // 过滤表单数据
      formFilterModel: {
        code: '',
        name: '',
        area: '',
        unit: ''
      },
      // 过滤项目区域选项
      areaOptions: [
        {
          value: '1',
          label: '区域1'
        },
        {
          value: '2',
          label: '区域2'
        },
        {
          value: '3',
          label: '区域3'
        },
        {
          value: '4',
          label: '区域4'
        }
      ],
      // 过滤承建单位选项
      unitOptions: [
        {
          value: '1',
          label: '单位1'
        },
        {
          value: '2',
          label: '单位2'
        },
        {
          value: '3',
          label: '单位3'
        },
        {
          value: '4',
          label: '单位4'
        }
      ],
      // 隐藏侧边
      leftHide: false,
      leftButton: false,
      rightHide: false,
      // 统计数据
      form: {
        cycle: '',
        area: '',
        status: '',
        type: '',
        method: 'projectType'
      },
      detailVisible: false,
      detailData: null,
      checkboxState: true,
      isIndeterminate: false,
      toolData: [
        {
          label: '政府投资项目',
          value: 'government'
        },
        {
          label: '企业投资项目',
          value: 'enterprise'
        }
      ],
      activeTool: 'government',
      configId: '',
      configKey: '',
      conditionScreenVisible: false,
      formSelect: {
        select: ''
      },
      propertyList: '',
      projectUrl: '',
      mapProjectList: [],
      mapProjectListData: []
    }
  },
  async created() {
    this.getTree()
    this.getProjectStatisticsData()

    const { viewer, layerManager } = await getAction(
      this.defaultViewId
    )
    mapViewer[this.defaultViewId] = viewer
    // const { layerManager } = await getAction(
    //   this.defaultViewId
    // )
    _layerManager = layerManager
    // mapViewer[this.defaultViewId].dataSources.add(
    //   labelLayer
    // )

    // mapViewer[
    //   this.defaultViewId
    // ].screenSpaceEventHandler.setInputAction(
    //   this.leftClick,
    //   Cesium.ScreenSpaceEventType.LEFT_CLICK
    // )

    // this.$bus.$on('showProjectLabel', (visible) => {
    //   console.log('show project label', visible)
    //   // if (labelLayer) {
    //   //   labelLayer.entities.show = visible
    //   // }
    // })
  },
  mounted() {
    New.$on('projectShow', (data) => {
      if (!data) {
        this.leftHide = true
        this.detailVisible = false
      } else {
        this.leftHide = false
      }
    })
    New.$on('leftTabChange', (data) => {
      switch (data) {
        case 'government':
          this.activeTool = 'government'
          break
        case 'enterprise':
          this.activeTool = 'enterprise'
          break
        default:
          break
      }
      this.getTree()
    })
    this.$bus.$on('viewDetail', (id) => {
      const find = this.projectListData.find(
        (item) => item['SmID'] === id
      )
      console.log('find', find)
      if (this.detailVisible) {
        this.backList()
      }
      this.$nextTick(() => {
        this.handleProjectItemClick(find)
      })
    })
  },
  beforeDestroy() {
    mapViewer[
      this.defaultViewId
    ].screenSpaceEventHandler.removeInputAction(
      Cesium.ScreenSpaceEventType.LEFT_CLICK
    )
    this.removeAllGeojson()
    // mapViewer[this.defaultViewId].dataSources.remove(
    //   labelLayer,
    //   true
    // )
  },
  methods: {
    getTree() {
      // 清空选项
      this.projectCycle = ''
      this.projectCycleOptions = []
      this.projectStage = ''
      this.projectStageOptions = []
      this.projectStatus = ''
      this.projectStatusOptions = []
      this.projectType = ''
      this.projectTypeOptions = []
      this.projectArea = ''
      this.projectAreaOptions = []
      this.projectProgress = ''
      this.projectProgressOptions = []

      treeBySpecialType('shengzhangdongtai').then((res) => {
        const list = res.data[0].children
        if (this.activeTool === 'government') {
          // this.getDataService(list[0].resourceInfo?list[0].resourceInfo[0].pkid:'')
          this.getLayer(
            list[0].resourceInfo
              ? list[0].resourceInfo[0]
              : null
          )
        } else if (this.activeTool === 'enterprise') {
          // this.getDataService(list[1].resourceInfo?list[1].resourceInfo[0].pkid:'')
          this.getLayer(
            list[1].resourceInfo
              ? list[1].resourceInfo[0]
              : null
          )
        }
      })
    },
    // getDataService(id) {
    //   if (!id) {
    //     return
    //   }
    //   const data = {
    //     pageIndex: 1,
    //     pageSize: 999,
    //     serviceId: id
    //   }
    //   retrieveDataServiceList(data).then((res) => {
    //     if (
    //       res.success &&
    //       res.data &&
    //       res.data.list.length
    //     ) {
    //       this.projectUrl = res.data.list[0].serviceDataUrl
    //       this.getFieldList(this.projectUrl)
    //     }
    //   })
    // },
    async getLayer(item) {
      if (!item) {
        return
      }
      const dataList = await this.getDataList(item.pkid)
      console.log('dataList', dataList)
      item.dataList = dataList
      item.serviceUrl = item.dataList[0].serviceUrl
      item.signService = item.dataList[0].signService
      item.currentDataIndex = 0
      this.projectUrl =
        item.dataList[
          item.currentDataIndex
        ].resourceServiceDataInfoList[0].serviceDataUrl
      this.configId =
        item.dataList[
          item.currentDataIndex
        ].resourceServiceDataInfoList[0].pkid
      this.configKey =
        item.dataList[
          item.currentDataIndex
        ].resourceServiceDataInfoList[0].attributeWord
      this.getFieldList(this.projectUrl)
      _layerManager.add(item)
      // const data = {
      //   pageIndex: 1,
      //   pageSize: 999,
      //   serviceId: id
      // }
      // serviceQuery(data).then((res) => {
      //   if (
      //     res.success &&
      //     res.data.list &&
      //     res.data.list.length
      //   ) {
      //     var data = res.data.list[0]
      //     const serviceItem = JSON.parse(data.serviceUrl)[0]
      //     data.serviceUrl = serviceItem.serviceUrl
      //     data.dataService = serviceItem.dataService
      //     this.projectUrl = serviceItem.dataService
      //     this.getFieldList(this.projectUrl)
      //     getAction(this.defaultViewId).then((res) => {
      //       res._layerManager.add(data)
      //     })
      //   }
      // })
    },
    // 获取服务的地图服务列表
    async getDataList(pkid) {
      const list = []
      await retrieveDataServiceById({
        pageIndex: 1,
        pageSize: 999,
        serviceId: pkid
      }).then((res) => {
        if (res.success) {
          if (res.data && res.data.length) {
            // 将配置的数据列表赋给原始数据
            list.push(...res.data)
          } else {
            this.$message.warning('该服务未配置数据')
          }
        } else {
          this.$message.error(
            res.message || '服务数据查询失败'
          )
        }
      })
      return list
    },
    getFieldList(url) {
      axios.get(`${url}/fields.json`).then((res) => {
        // if (res.status === 200 && res.data) {
        if (res.data) {
          this.propertyList = res.data.fieldNames
          // this.fieldList = this.propertyList.filter(
          //   (e) => e.toLowerCase().indexOf('sm') !== 0
          // )
          // // console.log(this.fieldList)
          this.getProjectInfoList(url)
        }
      })
    },
    getProjectInfoList(url) {
      const dataService = decodeURI(url)
      const dataServiceUrl =
        dataService.substring(
          0,
          dataService.lastIndexOf('/datasources/')
        ) +
        '/featureResults.json?returnContent=true&toIndex=-1'
      console.log('请求地址', dataServiceUrl)
      const dataSourceAndDataSet = dataService
        .substring(
          dataService.lastIndexOf('/datasources/') +
            '/datasources/'.length
        )
        .split('/datasets/')
        .map((item) => decodeURI(item))
      const str = []
      if (this.projectCycle) {
        str.push(`计划年度 = '${this.projectCycle}'`)
      }
      if (this.projectStage) {
        str.push(`项目阶段 = '${this.projectStage}'`)
      }
      if (this.projectStatus) {
        str.push(`项目状态 = '${this.projectStatus}'`)
      }
      if (this.projectType) {
        str.push(`项目类型 = '${this.projectType}'`)
      }
      if (this.projectArea) {
        str.push(`项目片区 = '${this.projectArea}'`)
      }
      if (this.projectProgress) {
        str.push(`项目进度 = '${this.projectProgress}'`)
      }
      const sqlParameter = {
        datasetNames: [`${dataSourceAndDataSet.join(':')}`],
        getFeatureMode: 'SQL',
        queryParameter: {
          fields: this.propertyList,
          attributeFilter: str.length
            ? str.join(' AND ')
            : ''
          // groupBy: `${val.label}`
        }
      }
      this.projectListData = []
      this.shownProjectListData = []
      const queryData = JSON.stringify(sqlParameter)
      axios.post(dataServiceUrl, queryData).then((res) => {
        // console.log('查询结果', res)
        if (res.data.featureCount > 0) {
          const list = res.data.features
          // console.log(list)
          const dataList = []
          const leftDataList = []
          list.forEach((i) => {
            const leftData = {}
            const fieldValues = i.fieldValues
            const fieldNames = i.fieldNames

            const projectCycleIndex = fieldNames.findIndex(
              (item) => item === '计划年度'
            )
            const projectStageIndex = fieldNames.findIndex(
              (item) => item === '项目阶段'
            )
            const projectStatusIndex = fieldNames.findIndex(
              (item) => item === '项目状态'
            )
            const projectTypeIndex = fieldNames.findIndex(
              (item) => item === '项目类型'
            )
            const projectAreaIndex = fieldNames.findIndex(
              (item) => item === '项目片区'
            )
            const projectProgressIndex =
              fieldNames.findIndex(
                (item) => item === '项目进度'
              )
            if (projectCycleIndex !== -1) {
              if (
                !this.projectCycleOptions.find(
                  (item) =>
                    item.value ===
                    fieldValues[projectCycleIndex]
                ) &&
                !!fieldValues[projectCycleIndex]
              ) {
                this.projectCycleOptions.push({
                  value: fieldValues[projectCycleIndex],
                  label: fieldValues[projectCycleIndex]
                })
              }
            }
            if (projectStageIndex !== -1) {
              if (
                !this.projectStageOptions.find(
                  (item) =>
                    item.value ===
                    fieldValues[projectStageIndex]
                ) &&
                !!fieldValues[projectStageIndex]
              ) {
                this.projectStageOptions.push({
                  value: fieldValues[projectStageIndex],
                  label: fieldValues[projectStageIndex]
                })
              }
            }
            if (projectStatusIndex !== -1) {
              if (fieldValues[projectStatusIndex]) {
                leftData.projectStatus =
                  fieldValues[projectStatusIndex]
              }
              if (
                !this.projectStatusOptions.find(
                  (item) =>
                    item.value ===
                    fieldValues[projectStatusIndex]
                ) &&
                !!fieldValues[projectStatusIndex]
              ) {
                this.projectStatusOptions.push({
                  value: fieldValues[projectStatusIndex],
                  label: fieldValues[projectStatusIndex]
                })
              }
            }
            if (projectTypeIndex !== -1) {
              if (fieldValues[projectTypeIndex]) {
                leftData.projectType =
                  fieldValues[projectTypeIndex]
              }
              if (
                !this.projectTypeOptions.find(
                  (item) =>
                    item.value ===
                    fieldValues[projectTypeIndex]
                ) &&
                !!fieldValues[projectTypeIndex]
              ) {
                this.projectTypeOptions.push({
                  value: fieldValues[projectTypeIndex],
                  label: fieldValues[projectTypeIndex]
                })
              }
            }
            if (projectAreaIndex !== -1) {
              if (fieldValues[projectAreaIndex]) {
                leftData.projectArea =
                  fieldValues[projectAreaIndex]
              }
              if (
                !this.projectAreaOptions.find(
                  (item) =>
                    item.value ===
                    fieldValues[projectAreaIndex]
                ) &&
                !!fieldValues[projectAreaIndex]
              ) {
                this.projectAreaOptions.push({
                  value: fieldValues[projectAreaIndex],
                  label: fieldValues[projectAreaIndex]
                })
              }
            }
            if (projectProgressIndex !== -1) {
              if (
                !this.projectProgressOptions.find(
                  (item) =>
                    item.value ===
                    fieldValues[projectProgressIndex]
                ) &&
                !!fieldValues[projectProgressIndex]
              ) {
                this.projectProgressOptions.push({
                  value: fieldValues[projectProgressIndex],
                  label: fieldValues[projectProgressIndex]
                })
              }
            }

            const va = {}
            fieldValues.forEach((value, idx) => {
              if (fieldNames[idx] === '项目投资（万元）') {
                if (value) {
                  leftData.projectValue = value
                }
                fieldNames[idx] = 'totalPrice'
              }
              if (
                fieldNames[idx] === '计划完成投资（万元）'
              ) {
                fieldNames[idx] = 'planPrice'
              }
              va[fieldNames[idx]] = value
              // va.updateTime = '2022-02-23 12:00:00'
            })
            const list = []
            i.geometry.points.map((item) => {
              list.push([item.x, item.y])
            })
            // let obj={"type":"FeatureCollection", "features": [{"type":"Feature","geometry":{"type":"LineString","coordinates":list,"properties":{}}}]}
            // va.geojson=JSON.stringify(obj)
            va.geometry = i.geometry
            va.checked = true
            dataList.push(va)
            if (leftData.projectArea) {
              leftDataList.push(leftData)
            }
          })
          New.$emit('getProjectInfo', leftDataList)
          this.projectListData = dataList
          this.shownProjectListData = dataList
        } else {
        }
      })
    },
    backList() {
      this.leftHide = false
      this.detailVisible = false
    },
    getProjectStatisticsData() {
      getProjectStatistics(
        this.form.method,
        this.form.method === 'projectStatus'
          ? this.form.status
          : '',
        this.form.method === 'projectCycle'
          ? this.form.cycle
          : '',
        this.form.method === 'projectType'
          ? this.form.type
          : ''
      )
        .then((res) => {
          this.statisticsData = []
          if (res.data) {
            this.statisticsData = res.data.filter(
              (item) => !!item.type
            )
          }
        })
        .catch((error) => {
          console.error(error)
          this.statisticsData = []
        })
    },

    confirmFilter() {
      this.getProjectInfoList(this.projectUrl)
    },

    handleChange(checked, data) {
      if (checked) {
        // this.showGeojson(data)
      } else {
        // this.hideGeojson(data)
      }
      if (
        this.shownProjectListData.every(
          (item) => item.checked === true
        )
      ) {
        this.isIndeterminate = false
        this.checkboxState = true
      } else if (
        this.shownProjectListData.every(
          (item) => item.checked === false
        )
      ) {
        this.isIndeterminate = false
        this.checkboxState = false
      } else {
        this.isIndeterminate = true
      }
    },

    handleCheckAllChange(val) {
      this.shownProjectListData.forEach((item) => {
        item.checked = val
      })
      this.isIndeterminate = false

      this.removeAllGeojson()
      this.shownProjectListData.forEach((item) => {
        // if (item.geojson) {
        //   try {
        //     const geojsonObject = JSON.parse(item.geojson)
        //     const promise = Cesium.GeoJsonDataSource.load(
        //       geojsonObject,
        //       {
        //         clampToGround: true
        //       }
        //     )
        //     mapViewer[this.defaultViewId].dataSources.add(
        //       promise
        //     )
        //     promise.then((dataSource) => {
        //       geojsonList.set(item.pkid, dataSource)
        //       dataSource.show = item.checked
        //
        //       const entity = dataSource.entities.values[0]
        //       let labelEntity
        //       if (entity.position) {
        //         labelEntity = new Cesium.Entity({
        //           show: false
        //         })
        //         labelEntity.position = entity.position
        //       } else if (
        //         entity.polyline.positions.getValue()[0]
        //       ) {
        //         labelEntity = new Cesium.Entity({
        //           show: false
        //         })
        //         labelEntity.position =
        //           entity.polyline.positions.getValue()[0]
        //       } else if (
        //         entity.polygon.hierarchy.getValue()
        //           .positions[0]
        //       ) {
        //         labelEntity = new Cesium.Entity({
        //           show: false
        //         })
        //         labelEntity.position =
        //           entity.polygon.hierarchy.getValue().positions[0]
        //       }
        //       if (labelEntity) {
        //         labelEntity.label = {
        //           text: item.name || '',
        //           show: item.checked,
        //           showBackground: true,
        //           font: '16px',
        //           horizontalOrigin:
        //             Cesium.HorizontalOrigin.CENTER,
        //           verticalOrigin:
        //             Cesium.VerticalOrigin.BOTTOM,
        //           pixelOffset: new Cesium.Cartesian2(0, 10),
        //           heightReference:
        //             Cesium.HeightReference
        //               .RELATIVE_TO_GROUND
        //         }
        //         // labelLayer.entities.add(labelEntity)
        //         labelEntities.set(item.pkid, labelEntity)
        //       }
        //     })
        //   } catch (err) {
        //     console.error('加载geojson失败', err)
        //   }
        // }
      })
    },

    removeAllGeojson() {
      // geojsonList.forEach((item) => {
      //   mapViewer[this.defaultViewId].dataSources.remove(
      //     item
      //   )
      // })
      // labelEntities.forEach((item) => {
      //   labelLayer.entities.remove(item)
      // })
    },

    showGeojson(data) {
      // if (geojsonList.get(data.pkid)) {
      //   geojsonList.get(data.pkid).show = true
      //   labelEntities.get(data.pkid).show = true
      //   mapViewer[this.defaultViewId].flyTo(
      //     geojsonList.get(data.pkid)
      //   )
      //   this.handleProjectItemClick(data)
      // }
    },

    hideGeojson(data) {
      // if (geojsonList.get(data.pkid)) {
      //   geojsonList.get(data.pkid).show = false
      //   labelEntities.get(data.pkid).show = false
      // }
    },

    handleProjectItemClick(data) {
      // console.log('点击', data.geometry)
      // const primitives = mapViewer[this.defaultViewId].scene.primitives
      // const geometryInstance = new Cesium.GeometryInstance({
      //   geometry: data.geometry
      // })
      // const primitive = new Cesium.Primitive({
      //   geometryInstances: geometryInstance,
      //   appearance: new Cesium.EllipsoidSurfaceAppearance({
      //     material: Cesium.Material.fromType('Stripe')
      //   }),
      //   asynchronous: false
      // })
      // primitives.add(primitive)
      // if (geojsonList.get(data.pkid)) {
      //   const geojson = geojsonList.get(data.pkid)
      //   mapViewer[this.defaultViewId].flyTo(geojson)
      //   // 恢复之前的颜色
      //   if (this.previousEntities && this.previousColor) {
      //     this.previousEntities.forEach((item) => {
      //       item.polyline.material.color =
      //         this.previousColor
      //     })
      //   }
      //   this.previousEntities = geojson.entities.values
      //   this.previousColor =
      //     geojson.entities.values[0].polyline.material.color
      //   this.previousEntities.forEach((item) => {
      //     item.polyline.material.color =
      //       Cesium.Color.fromCssColorString('#00ff00')
      //   })
      // }
      this.detailVisible = true
      this.detailData = data
    },
    handleFilterClick() {
      console.log('handleFilterClick')
      this.filterPanelVisible = !this.filterPanelVisible
    },
    clearFilterParams() {
      console.log('clearFilterParams')
    },
    handleLeftMouseDown(e) {
      this.leftX = e.clientX
      this.leftWidth = this.$refs.leftRef.offsetWidth
      document.documentElement.addEventListener(
        'mousemove',
        this.rightMove
      )
      document.documentElement.addEventListener(
        'mouseup',
        this.rightEnd
      )
    },
    rightMove(e) {
      let width = this.leftWidth + (this.leftX - e.clientX)
      width = width >= 500 ? 500 : width < 400 ? 400 : width
      this.$refs.leftRef.style['min-width'] = `${width}px`
      this.$refs.leftRef.style.setProperty(
        '--scroll-width',
        `${-(width - 47 - 1)}px`
      )
    },
    rightEnd() {
      document.documentElement.removeEventListener(
        'mousemove',
        this.rightMove
      )
      document.documentElement.removeEventListener(
        'mouseup',
        this.rightEnd
      )
    },
    // leftClick(movement) {
    //   const pickedFeature = mapViewer[
    //     this.defaultViewId
    //   ].scene.pick(movement.position)
    //   if (Cesium.defined(pickedFeature)) {
    //     // 点击的EntityCollection
    //     const clickedEntityCollection =
    //       pickedFeature.id.entityCollection.values
    //     let clickedId
    //     geojsonList.forEach((value, key) => {
    //       if (
    //         value.entities.values ===
    //         clickedEntityCollection
    //       ) {
    //         clickedId = key
    //       }
    //     })
    //     if (clickedId) {
    //       const find = this.shownProjectListData.find(
    //         (item) => item.pkid === clickedId
    //       )
    //       if (find) {
    //         this.handleProjectItemClick(find)
    //       }
    //     }
    //   }
    // },
    toolItemClickHandle(data) {
      const { value } = data
      this.activeTool =
        this.activeTool === value ? undefined : value
      if (this.activeTool) {
        New.$emit('rightTabChange', this.activeTool)
      }
      this.getTree()
    }
  },
  computed: {
    defaultViewId() {
      return this.$store.state.layer.defaultViewId
    },
    shownDetailData() {
      const shownData = {}
      if (this.detailData) {
        for (const item of Object.entries(
          this.detailData
        )) {
          if (item[0] !== 'checked') {
            shownData[item[0]] = item[1]
          }
        }
      }
      return shownData
    }
  },
  watch: {
    keyword(val) {
      if (val) {
        this.shownProjectListData =
          this.projectListData.filter((item) => {
            return (
              item.项目名称 &&
              item.项目名称.indexOf(val) !== -1
            )
          })
      } else {
        this.shownProjectListData = this.projectListData
      }
    },
    form: {
      handler() {
        this.getProjectStatisticsData()
      },
      deep: true
    },
    formFilterModel: {
      handler(val) {
        console.log('filter改变', val)
      },
      deep: true
    },
    shownProjectListData: {
      handler(val) {
        // console.log('显示列表变化', val)
        if (_layerManager) {
          // console.log(_layerManager.layers)
          const layer = _layerManager.layers.find(
            (item) =>
              item.title === '政府投资项目' ||
              item.title === '企业投资项目'
          )
          if (layer) {
            // const allIds = val
            //   .map((project) => project.SmID)
            const ids = val
              .filter((project) => !!project.checked)
              .map((project) => project.SmID)
            layer.layer.forEach((item) => {
              // console.log('ids显示', ids)
              item.setObjsVisible(ids, true)
              // if (ids.length) {
              //   console.log('ids显示', ids)
              //   item.setObjsVisible(ids, true)
              //   // item.setOnlyObjsVisible(ids, true)
              // } else {
              //   console.log('allIds隐藏', allIds)
              //   item.setObjsVisible(allIds, false)
              //   // item.setOnlyObjsVisible(allIds, false)
              // }
            })
          }
        }
      },
      deep: true
    },
    // shownProjectListData(val) {
    //   if (val) {
    //     if (val.length === 0) {
    //       this.isIndeterminate = false
    //       this.checkboxState = false
    //     } else {
    //       if (val.every((item) => item.checked === true)) {
    //         this.isIndeterminate = false
    //         this.checkboxState = true
    //       } else if (
    //         val.every((item) => item.checked === false)
    //       ) {
    //         this.isIndeterminate = false
    //         this.checkboxState = false
    //       } else {
    //         this.isIndeterminate = true
    //       }
    //     }
    //     this.removeAllGeojson()
    //     setTimeout(() => {
    //       val.forEach((item) => {
    //         if (item.geojson) {
    //           try {
    //             const geojsonObject = JSON.parse(
    //               item.geojson
    //             )
    //             const promise =
    //               Cesium.GeoJsonDataSource.load(
    //                 geojsonObject,
    //                 {
    //                   clampToGround: true
    //                 }
    //               )
    //             mapViewer[
    //               this.defaultViewId
    //             ].dataSources.add(promise)
    //             // debugger
    //             promise.then((dataSource) => {
    //               geojsonList.set(item.pkid, dataSource)
    //               dataSource.show = item.checked

    //               const entity =
    //                 dataSource.entities.values[0]
    //               let labelEntity
    //               if (entity.position) {
    //                 labelEntity = new Cesium.Entity()
    //                 labelEntity.position = entity.position
    //               } else if (
    //                 entity.polyline.positions.getValue()[0]
    //               ) {
    //                 labelEntity = new Cesium.Entity()
    //                 labelEntity.position =
    //                   entity.polyline.positions.getValue()[0]
    //               } else if (
    //                 entity.polygon.hierarchy.getValue()
    //                   .positions[0]
    //               ) {
    //                 labelEntity = new Cesium.Entity()
    //                 labelEntity.position =
    //                   entity.polygon.hierarchy.getValue().positions[0]
    //               }
    //               if (labelEntity) {
    //                 labelEntity.label = {
    //                   text: item.name || '',
    //                   show: true,
    //                   showBackground: true,
    //                   font: '16px',
    //                   horizontalOrigin:
    //                     Cesium.HorizontalOrigin.LEFT,
    //                   verticalOrigin:
    //                     Cesium.VerticalOrigin.BOTTOM,
    //                   pixelOffset: new Cesium.Cartesian2(
    //                     -20,
    //                     -40
    //                   ),
    //                   heightReference:
    //                     Cesium.HeightReference
    //                       .RELATIVE_TO_GROUND
    //                 }
    //                 // labelLayer.entities.add(labelEntity)
    //                 labelEntities.set(
    //                   item.pkid,
    //                   labelEntity
    //                 )
    //               }
    //             })
    //           } catch (err) {
    //             console.error('加载geojson失败', err)
    //           }
    //         }
    //       })
    //       const geojsonArray = [...geojsonList.values()]
    //       // console.log('geojsonArray', geojsonArray)
    //       mapViewer[this.defaultViewId].flyTo(
    //         geojsonArray[0]
    //       )
    //     }, 200)
    //   } else {
    //     this.removeAllGeojson()
    //     this.isIndeterminate = false
    //     this.checkboxState = false
    //   }
    // },
    projectCycle() {
      this.confirmFilter()
    },
    projectStage() {
      this.confirmFilter()
    },
    projectStatus() {
      this.confirmFilter()
    },
    projectType() {
      this.confirmFilter()
    },
    projectArea() {
      this.confirmFilter()
    },
    projectProgress() {
      this.confirmFilter()
    },
    leftHide(val) {
      if (!val) {
        this.detailVisible = false
        New.$emit('dataShow', false)
        this.$refs.leftRef.style.zIndex = '2'
      } else {
        this.$refs.leftRef.style.zIndex = '0'
      }
      // else if(val){
      //   this.detailVisible=false
      // }
    }
  }
}
</script>

<style lang="scss" scoped>
.left {
  z-index: 2;
  position: fixed;
  right: 48px;
  top: 60px;
  width: 400px;
  height: calc(100% - 60px);
  padding: 0;
  background: linear-gradient(
    90deg,
    rgba(25, 47, 61, 0.85),
    rgba(25, 47, 61, 0.1)
  );
  transition: all 1s;
  --scroll-width: -352px;

  &-content {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    padding: 10px 0;
    position: relative;

    &-tag {
      &-t {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 5px;

        &::before,
        &::after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
        }

        &::before {
          left: 0;
          border-top: 4px solid #fff;
          border-right: 4px solid transparent;
        }

        &::after {
          right: 0;
          border-top: 4px solid #fff;
          border-left: 4px solid transparent;
        }
      }

      &-b {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 5px;

        &::before,
        &::after {
          content: '';
          width: 0;
          height: 0;
          position: absolute;
          bottom: 0;
        }

        &::before {
          left: 0;
          border-bottom: 4px solid #fff;
          border-right: 4px solid transparent;
        }

        &::after {
          right: 0;
          border-bottom: 4px solid #fff;
          border-left: 4px solid transparent;
        }
      }
    }

    &-title {
      height: 50px;
      line-height: 50px;
      padding-left: 14px;
      font-size: 18px;
      font-weight: 800;
      color: #00d2ff;
      word-break: keep-all;
      border-top: 1px solid rgba(255, 255, 255, 0.2);
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    &-search {
      height: 30px;
      width: calc(100% - 16px);
      margin: 10px auto;
      display: flex;
      align-items: center;

      .search {
        margin: 0 10px;
      }
    }

    &-query {
      position: absolute;
      top: 50px;
      left: 100%;
      width: 264px;
      background: #193b51;
      box-shadow: 0 0 8px 0 #057595;
      border-radius: 8px;
      padding: 10px;

      &-item {
        flex: 1;
        //&:first-of-type {
        //  padding-top: 0;
        //}

        //padding-top: 10px;
        //display: flex;
        //flex-direction: column;

        ::v-deep {
          .el-input__icon,
          .el-range-separator {
            height: 30px;
            line-height: 30px;
            color: #fff;
            padding: 0;
          }

          .el-form-item__content {
            line-height: 30px;
          }

          .el-form-item__label {
            line-height: 30px;
          }

          .el-input__inner {
            padding: 0 10px;
          }

          .el-input__inner,
          .el-range-input {
            background-color: transparent;
            border: none;
            color: #fff;
            height: 30px !important;
            border-radius: 0;
          }

          .el-tag.el-tag--info {
            background-color: rgba(201, 201, 201, 0.2);
            border-color: rgba(255, 255, 255, 0.4);
            color: #fff;
          }

          .el-tag--small {
            height: 20px;
            line-height: 20px;
          }
        }

        & > span {
          margin-bottom: 4px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
        }

        & > .time {
          width: 100%;
          height: 30px;
          background: rgba(201, 201, 201, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.4);
        }

        & > .screen {
          width: 100%;
          height: 30px;
          border: 1px solid rgba(255, 255, 255, 0.5);
        }

        .screen {
          background: rgba(201, 201, 201, 0.5);
        }

        & > .area {
          width: 100%;
          height: 30px;
        }
      }

      &-btn {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 10px;

        & > div {
          width: 70px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 2px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          cursor: pointer;
        }

        .submit {
          background: rgba(0, 210, 255, 0.5);
        }

        .cancel {
          background: rgba(255, 255, 255, 0.5);
        }
      }
    }

    &-tree {
      ::v-deep {
        // scrollbar横向滚动条
        .el-scrollbar__wrap {
          overflow-x: hidden;

          .project-list {
            &-item {
              background-color: rgba(25, 47, 61, 0.5);
              border: 1px solid rgba(0, 0, 0, 0.2);
              margin-bottom: 4px;
              padding: 10px;
              cursor: pointer;

              //&:hover {
              //  background-color:rgba(255,255,255,0);
              //}

              &-top {
                display: flex;
                align-items: center;

                .el-checkbox__input {
                  margin-right: 10px;

                  .el-checkbox__inner {
                    width: 12px;
                    height: 12px;
                    background: rgba(255, 255, 255, 0.3);
                    border: 1px solid #ffffff;
                  }
                }

                &__title {
                  width: calc(100% - 12px - 10px);
                  display: flex;
                  align-items: center;

                  .name {
                    font-size: 14px;
                    font-weight: 800;
                    flex: 1;
                    // text-overflow: ellipsis;
                    // overflow: hidden;
                    display: inline-block;
                    // white-space: nowrap;
                    margin-right: 10px;
                  }

                  .status {
                    float: right;
                    position: relative;
                    text-align: center;
                    line-height: 20px;
                    width: 40px;
                    height: 20px;
                    font-size: 14px;

                    &::before {
                      content: '';
                      width: 7px;
                      height: 7px;
                      background: rgba(0, 0, 0, 0.5);
                      position: absolute;
                      left: 0;
                      top: 0;
                      clip-path: polygon(
                        80% -1px,
                        100% 0,
                        0 100%,
                        -1px 80%
                      );
                    }

                    &::after {
                      content: '';
                      width: 7px;
                      height: 7px;
                      background: rgba(0, 0, 0, 0.5);
                      position: absolute;
                      right: 0;
                      bottom: 0;
                      clip-path: polygon(
                        100% 0,
                        100% 40%,
                        40% 100%,
                        0 100%
                      );
                    }
                  }

                  .zj {
                    background: linear-gradient(
                      270deg,
                      #cfaf00,
                      #beb683
                    );
                  }

                  .jc {
                    background: linear-gradient(
                      270deg,
                      #00b79f,
                      #8ab700
                    );
                  }

                  .dj {
                    background: linear-gradient(
                      150deg,
                      #e3a482,
                      #c45833
                    );
                  }

                  .year {
                    color: #00d2ff;
                    font-size: 14px;
                    margin-right: 10px;
                  }

                  .type {
                    width: 60px;
                    height: 20px;
                    background: #c5891a;
                    color: white;
                    font-size: 14px;
                    text-align: center;
                    line-height: 20px;
                    border-radius: 2px;
                  }
                }
              }

              &-bottom {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-top: 9px;

                span {
                  font-size: 12px;
                  font-weight: 500;
                  color: #d2e6f0;
                }
              }
            }
          }
        }
      }

      width: 100%;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
      height: calc(100% - 50px - 50px);

      &-item:not(:last-child) {
        margin-bottom: 4px;
      }

      &-item {
        background: rgba(0, 0, 0, 0.2);
        padding: 10px 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        &-l {
          flex: 1;
          margin-right: 10px;
          display: flex;
          flex-direction: column;

          & > span:nth-child(1) {
            word-break: break-all;
            font-size: 14px;
            font-weight: 800;
            color: #ffffff;
          }

          & > span:nth-child(2) {
            font-size: 12px;
            font-weight: 500;
            color: #d2e6f0;
          }
        }

        &-r {
          width: 40px;
          height: 20px;
          font-size: 14px;
          font-weight: 400;
          color: #ffffff;
          text-align: center;
          line-height: 20px;
          background: linear-gradient(
            270deg,
            #505fba,
            #949bc5
          );
          position: relative;

          &::before {
            content: '';
            width: 7px;
            height: 7px;
            background: rgba(0, 0, 0, 0.5);
            position: absolute;
            left: 0;
            top: 0;
            clip-path: polygon(
              80% 0,
              100% 0,
              0 100%,
              0 80%
            );
          }
        }
      }
    }
  }

  .filter-panel {
    display: flex;
    align-items: center;
    padding: 10px;

    ::v-deep {
      .el-form {
        padding: 10px;

        &-item {
          margin-bottom: 10px;

          &__label {
            color: white !important;
            padding: 0;
            line-height: 16px;
          }

          &__content {
            .el-input {
              &__inner {
                color: white;
                background: rgba(255, 255, 255, 0.2);
                border: 1px solid rgba(255, 255, 255, 0.2);
              }
            }

            .el-select {
              width: 100%;
            }
          }
        }
      }
    }
  }

  &-hide {
    //width: 0;
    right: var(--scroll-width);

    & > .left-close {
      background-color: red;

      &::before,
      &::after {
        transform-origin: 1px 1px;
        // transform-origin: 6px 1px;
      }
    }

    //& >  .left-button{
    //  left: 330px !important;
    //}
  }

  &-close {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 44px;
    cursor: pointer;
    background: #192f3d;
    opacity: 0.7;

    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 7px;
      height: 2px;
      background: #fff;
      top: 50%;
      left: 50%;
      // transform-origin: 1px 1px;
      transform-origin: 6px 1px;
    }

    &::before {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(-45deg);
    }

    &::after {
      transform: translateX(-50%) translateY(-50%)
        rotateZ(45deg);
    }
  }

  .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    cursor: col-resize;
  }
}

.v-enter-from,
.v-leave-to {
  transform: translateX(-20px);
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: all 0.3s ease-out;
}

::v-deep {
  .el-select-dropdown {
    border-color: #4a80a3;

    .el-select-dropdown__empty {
      background-color: #4a80a3;
      color: white;
    }

    .el-select-dropdown__list {
      background-color: #4a80a3;

      .el-select-dropdown__item {
        color: white;
        background-color: #4a80a3;

        &.selected {
          color: white;
        }

        &.hover {
          background-color: #28516c;
        }
      }
    }

    .popper__arrow {
      border-bottom-color: #4a80a3;

      &::after {
        border-bottom-color: #4a80a3;
      }
    }
  }
}

.detail {
  width: 100%;
  overflow: hidden;
  height: 100%;
  position: relative;
  background: linear-gradient(
    90deg,
    rgba(25, 47, 61, 0.1),
    rgba(25, 47, 61, 0.85)
  );
  display: flex;
  flex-direction: column;

  &-title {
    font-family: PingFang SC;
    color: #ffffffaa;
    padding: 16px 20px;
    cursor: pointer;
    border-bottom: 1px solid #ffffff22;
    display: flex;
    align-items: center;

    .back {
      margin-right: 10px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: none;
      padding: 0;
      background-color: #ffffff33;
      color: white;
    }

    span {
      font-size: 14px;
      line-height: 18px;
      font-weight: 800;
    }
  }

  .body {
    flex: 1;
    overflow: hidden;
  }
}

.investPro {
  &-title {
    display: flex;
    height: 50px;
    line-height: 50px;
    cursor: pointer;

    > div {
      margin-right: 20px;
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #d2e6f0;

      &:first-child {
        margin-left: 21px;
      }
    }

    .is-active {
      color: rgba(26, 217, 255, 1);
    }
  }
}

.more-btn {
  width: 100%;
  // height: 30px;
  background: rgba(201, 201, 201, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0;
}

.popper-title {
  color: white;
  margin: 10px 0 20px 35px;
  font-size: 16px;
}

.btn-basic {
  width: 110px;
  height: 35px;
  border-radius: 4px;
  color: white;
}

.confirm-btn {
  @extend .btn-basic;
  // background: #00d2ff;
  border: none;
}

.cancel-btn {
  @extend .btn-basic;
  background: rgba(255, 255, 255, 0);
  border: 1px solid #d2e6f0;
}

::v-deep {
  .el-form-item__label {
    color: white !important;
  }
}
</style>
